<template>
  <div class="moment-card">
    <g-avatar :icon="data.avatar" />
    <div class="moment-card__content">
      <div class="moment-card-name">{{ data.userName }}</div>
      <div class="moment-card-content">
        <span class="text-name">#{{ data.articleTitle }}#</span>
        <span>{{ data.comment }}</span>
      </div>
      <media-preview :data="data.pics" />
      <div class="moment-card-control">
        <span>{{ data.createTime }}</span>
        <div class="moment-card-menu">
          <span class="iconfont icon-pinglun1" @click="toggleMenu" />
          <div v-if="menuVisible" class="menu-group">
            <span class="menu-item iconfont icon-xin" @click="emitLike('like')">{{ liked ? '取消' : '赞' }}</span>
            <span class="menu-item iconfont icon-pinglun" @click="emitComment()">评论</span>
          </div>
        </div>
      </div>
      <div v-if="likes || data.comments.length" class="moment-card-comment">
        <div v-if="likes" class="moment-card-comment__like">
          <span class="iconfont icon-xin" />
          <span>{{ likes }}</span>
        </div>
        <div class="moment-card-comment__replay">
          <comment-item v-for="item in data.comments" :key="item.id" :data="item" @click="emitComment(item)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GAvatar from '@/components/GAvatar.vue'
import CommentItem from './CommentItem.vue'
import MediaPreview from './MediaPreview.vue'
export default {
  components: {
    CommentItem,
    GAvatar,
    MediaPreview
  },
  props: {
    data: {
      type: Object,
      required: true
    },
    user: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      menuVisible: false
    }
  },
  computed: {
    likes() {
      return (this.data.lkUsers || []).map(item => item.userName).join(', ')
    },
    liked() {
      return this.data.lkUsers.some(item => item.user_id === this.user.userId)
    }
  },
  methods: {
    toggleMenu() {
      this.menuVisible = !this.menuVisible
    },
    emitComment(data) {
      if (data && data.userId === this.user.userId) {
        return
      }
      this.$emit('comment', data)
      this.menuVisible = false
    },
    emitLike() {
      this.$emit('like', {
        artId: this.data.id,
        type: this.liked ? 2 : 1
      })
      this.menuVisible = false
    }
  }
}
</script>

<style lang="less">
.moment-card {
  display: flex;
  align-items: flex-start;
  padding: 20px 30px 20px 30px;
  box-shadow: inset 0 -2px 0 0 #f5f5f5;
  .g-avatar {
    flex-shrink: 0;
    margin-right: 10px;
  }
  &__content {
    flex: 1;
    font-size: 32px;
    line-height: 46px;
    word-break: break-all;
    margin-bottom: 10px;
    .text-name {
      color: #5d6c97;
      font-weight: bold;
      margin-right: 8px;
    }
  }
  &-name {
    color: #5d6c97;
    font-family: @font-medium;
    font-weight: bold;
    font-size: 32px;
    line-height: 46px;
    margin-bottom: 4px;
  }
  &-comment {
    font-size: 28px;
    padding: 10px;
    background-color: #f7f7f7;

    &__like {
      font-family: @font-medium;
      font-weight: bold;
      color: #5d6c97;
      padding: 0 10px 10px 16px;
      box-shadow: inset 0 -2px 0 0 #efefef;
    }
  }

  &-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28px;
    line-height: 56px;
    color: #999999;
    .icon-pinglun1 {
      font-size: 46px;
      color: #5d6c97;
    }
  }

  .icon-xin {
    margin-right: 4px;
  }

  &-menu {
    position: relative;
  }

  .menu-group {
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translate(-100%, -50%);
    white-space: nowrap;
    line-height: 62px;
    background-color: rgba(0, 0, 0, .5);
    font-size: 28px;
    border-radius: 8px;
    span {
      display: inline-block;
      width: 100px;
      text-align: center;
      color: #fff;
      padding: 0 10px;
    }
  }

  .video-preview, .upload-img-group {
    margin-top: 20px !important;
  }
}
</style>
